<template>
  <div class="radio-btn-box">
    <div
      v-for="(item, index) in radio"
      :key="index"
      class="box-tools"
      :class="panelType == item.value ? 'active' : ''"
      @click="panelTypeChange(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: "RadioBtn",
  props: {
    radio: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "list",
    },
  },
  data() {
    return {
      panelType: "list",
    };
  },
  mounted() {
    this.panelType = this.value;
  },
  methods: {
    panelTypeChange(item) {
      this.panelType = item.value;
      this.$emit("change", item.value);
      this.$emit("input", item.value);
    },
  },
};
</script>
<style scoped lang="scss">
.radio-btn-box {
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16px;

  .box-tools {
    text-align: center;
    cursor: pointer;
    line-height: 38px;
    height: 100%;
    flex: 1;
    border-right: none;
    &:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    &:last-child {
      border-radius: 0px 4px 4px 0px;
    }
    &:only-child {
      border-radius: 4px;
    }
  }
  .active {
    background: #307eff;
    color: #ffffff;
  }
}
</style>
